/**
 * 计算时间转换为秒
 * @param {string} time 
 * @returns 
 */

function parseTime(time) {
    var parts = time.split(':');
    return (+parts[0] ? +parts[0] : 0) * 60 + (+parts[1] ? +parts[1] : 0)
}


/**
 * 拆分字符串歌词为数组
 * 并转换成想要的格式如：{time:歌词时间, text: 歌词文字}
 */
function splitLrc() {
    var lrcArray = lrc.split('\n');
    var objArray = [];
    for (var i = 0; i < lrcArray.length; i++) {
        var text = lrcArray[i].split(']')[1];
        var time = parseTime(lrcArray[i].split(']')[0].substring(1));
        objArray.push({
            time,
            text,
        })
    }
    return objArray
}

/**
 * 根据时间获取到当前正在播放的歌词
 * @param {number} time 
 */
function jumpPlace() {
    var lrcs = doms.lrcData;
    var currentTime = doms.audio.currentTime;
    for (var i = 0; i < lrcs.length; i++) {
        if (currentTime < lrcs[i].time) {
            return i - 1;
        }
    }

    return lrcs.length - 1;
}

// 获取dom元素和一些配置
var doms = {
    audio: document.querySelector('.audio'),
    lrcData: splitLrc(),
    ul: document.querySelector('.music-lrc'),
    musicList: document.querySelector('.music-list'),
    isMoveIng: false,
}

/**
 * 创建歌词li
 */
function creatElementsLi() {
    for (var i = 0; i < doms.lrcData.length; i++) {
        var li = document.createElement('li');
        li.textContent = doms.lrcData[i].text;
        doms.ul.appendChild(li);
    }
}
creatElementsLi();




// 获取容器的高度 / 2
var musicListHight = doms.musicList.clientHeight;
// 获取每个li的高度 / 2
var liHight = doms.ul.children[0].clientHeight;
// 最大偏移
let maxHight = doms.ul.clientHeight - musicListHight;

var offsetY = 0; // 记录偏移量

/**
 * 设置偏移量
 */
function setOffset(move) {
    if (move) {
        doms.ul.style.transform = `translateY(-${move}px)`;
        return;
    }

    let index = jumpPlace();
    let offset = (liHight * index) + liHight / 2 - musicListHight / 2;
    if (offset < 0) {
        offset = 0;
    }
    if (offset > maxHight) {
        offset = maxHight;
    }
    var activeLi = doms.ul.querySelector('.active');
    if (activeLi) {
        activeLi.classList.remove('active');
    }
    doms.ul.children[index].classList.add('active');


    // 如果在移动，就停止自动移动
    if (!doms.isMoveIng) {
        offsetY = offset;
        doms.ul.style.transform = `translateY(-${offset}px)`;
    }

}

var startY = 0;
var endY = 0;
//获取最大的移动量 用ul的高度 - 容器的高度
var maxMoveY = doms.ul.clientHeight - doms.musicList.clientHeight;

// 监听开始移动
doms.musicList.addEventListener('touchstart', function (event) {
    startY = event.changedTouches[0].pageY;
})

// 监听移动过程
doms.musicList.addEventListener('touchmove', function (event) {
    // 修改移动状态
    doms.isMoveIng = true;

    // 获取触摸的坐标
    let moveY = event.changedTouches[0].pageY;
    endY = -(moveY - startY) + offsetY;
    if (endY < 0) {
        endY = 0;
    }
    if (endY > maxMoveY) {
        endY = maxMoveY;
    }
    setOffset(endY)
})

var timer;
// 监听移动结束
doms.musicList.addEventListener('touchend', function (event) {
    console.log('移动结束')
    offsetY = endY;

    // 如果有计时器，就清除
    if (timer) {
        clearTimeout(timer);
    }

    // 设置3秒的时间, 回到当前播放的位置
    timer = setTimeout(function () {
        if (doms.isMoveIng) {
            doms.isMoveIng = false
        }
    }, 2000)
})

/**
 * 点击跳转到此位置
 */
function clickJumpPlace() {
    // 如果有计时器，就清除
    if (timer) {
        clearTimeout(timer);
        doms.isMoveIng = false;
    }

    let scrollTop = offsetY + musicListHight / 2;
    let index = parseInt(scrollTop / 30);
    var activeLi = doms.ul.querySelector('.active');
    if (activeLi) {
        activeLi.classList.remove('active');
    }
    doms.ul.children[index].classList.add('active');
    let time = doms.lrcData[index].time;
    doms.audio.currentTime = time;
    doms.audio.play();
}




doms.audio.addEventListener('timeupdate', function () {
    setOffset();
})